import React from 'react';
import { connect } from 'dva';
//import PropTypes from 'prop-types';
import { Card, Form, InputNumber, Button, Divider } from 'antd';
import { Row, Col } from 'antd';
import { message } from 'antd';

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const Calculator = ({ dispatch, calculator, loading = false }) => {
    const [form] = Form.useForm();
    async function handleAdd() {
        //const {num1, num2} = form.getFieldsValue()
        try {
            const {num1, num2} = await form.validateFields();
            dispatch({
                type: 'calculator/add',
                payload: {num1: num1, num2: num2},
            });
        } catch (errorInfo) {
            console.log('Failed:', errorInfo);
            const { errorFields } = errorInfo
            const msg = errorFields.map(item => item.errors[0])
            message.error(msg);
        }
    }
    async function handleSubtract() {
        //const {num1, num2} = form.getFieldsValue()
        try {
            const {num1, num2} = await form.validateFields();
            dispatch({
                type: 'calculator/subtract',
                payload: {num1: num1, num2: num2},
            });
        } catch (errorInfo) {
            console.log('Failed:', errorInfo);
            const { errorFields } = errorInfo
            const msg = errorFields.map(item => item.errors[0])
            message.error(msg);
        }
    }
    async function handleMultiply() {
        //const {num1, num2} = form.getFieldsValue()
        try {
            const {num1, num2} = await form.validateFields();
            dispatch({
                type: 'calculator/multiply',
                payload: {num1: num1, num2: num2},
            });
        } catch (errorInfo) {
            console.log('Failed:', errorInfo);
            const { errorFields } = errorInfo
            const msg = errorFields.map(item => item.errors[0])
            message.error(msg);
        }
    }
    async function handleDivide() {
        //const {num1, num2} = form.getFieldsValue()
        try {
            const {num1, num2} = await form.validateFields();
            dispatch({
                type: 'calculator/divide',
                payload: {num1: num1, num2: num2},
            });
        } catch (errorInfo) {
            console.log('Failed:', errorInfo);
            const { errorFields } = errorInfo
            const msg = errorFields.map(item => item.errors[0])
            message.error(msg);
        }
    }
    function handleMemo() {
        dispatch({
            type: 'calculator/memo'
        });
    }
  return (
    <Row style={{marginTop: 100}}>
        <Col span={10} offset={7}>
    <Card title="简单计算器">
    <Form form={form} {...layout}>
        <Row>
            <Col span={12}>
                <Form.Item name="num1" label="数字1" rules={[{ required: true, type: 'number', min: 0, max: 99, message: '数字1必填数字类型，大于等于0小于等于99' }]}>
                    <InputNumber style={{width:160}} placeholder="请输入数字1"/>
                </Form.Item>
            </Col>
            <Col span={12}>
                <Form.Item name="num2" label="数字2" rules={[{ required: true, type: 'number', min: 0, max: 99, message: '数字2必填数字类型，大于等于0小于等于99' }]}>
                    <InputNumber style={{width:160}} placeholder="请输入数字2"/>
                </Form.Item>
            </Col>
        </Row>
        <Divider />
        <Row>
            <Col span={12}>
                <Form.Item label="结果">
                    <InputNumber style={{width:160}} value={calculator.result} readOnly={true}/>
                </Form.Item>
            </Col>
            <Col span={12}>
                <Form.Item label="缓存值">
                    <InputNumber style={{width:160}} value={calculator.memo} readOnly={true}/>
                </Form.Item>
            </Col>
        </Row>
        <Divider />
        <Form.Item label=" " labelCol={{span:4}} colon={false}>
            <Button type="primary" style={{ margin: '0 8px' }} loading={loading} onClick={handleAdd}>
                加
            </Button>
            <Button type="primary" style={{ margin: '0 8px' }} loading={loading} onClick={handleSubtract}>
                减
            </Button>
            <Button type="primary" style={{ margin: '0 8px' }} loading={loading} onClick={handleMultiply}>
                乘
            </Button>
            <Button type="primary" style={{ margin: '0 8px' }} loading={loading} onClick={handleDivide}>
                除
            </Button>
            <Button type="dashed" style={{ margin: '0 8px' }} onClick={handleMemo}>
                缓存
            </Button>
        </Form.Item>
    </Form>
    </Card>
    </Col>
    </Row>
  );
};

Calculator.propTypes = {
};

//export default Calculator;
export default connect(({ calculator, loading }) => ({
    calculator, loading: loading.models.calculator
}))(Calculator);